<template>
    <div class="UpdateInfo">
        <h1>修改信息</h1>
        <div class="form">
            <div class="input">
                <label>用户名</label>
                <input type="text" class="t-input" disabled v-model="$vals.username"/>
            </div>
            <div class="input">
                <label>昵称</label>
                <input type="text" class="t-input" v-model="name"/>
            </div>
            <div class="input">
                <label>角色</label>
                <input type="text" class="t-input" disabled v-model="this.$vals.role"/>
            </div>
            <div class="input">
                <label>电话</label>
                <input type="text" maxlength="11" class="t-input" v-model="tel"/>
            </div>
            <p v-show="tip !== ''" v-text="tip"/>
            <button class="t-btn" @click="update()">确认修改</button>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
        },
        data() {
            return {
                name: this.$vals.name,
                tel: this.$vals.tel
            }
        },
        created() {
            console.log(this.$vals)
        },
        methods: {
            update() {
                if (this.tip.length !== 0)
                    return;
                this.$axios.put('/user', {name: this.name, tel: this.tel})
                    .then(this.$then);
            }
        },
        computed: {
            tip() {
                if (this.name.length === 0) {
                    return '昵称不能为空';
                }
                if (this.tel.length < 11) {
                    return '手机号码不能小于11位';
                }
                return '';
            }
        }
    };
</script>
<style scoped lang="scss" >
    @import "UpdateInfo";
</style>
